<template>
    <div id="home">
        <van-search placeholder="请输入搜索关键词" class="home-search" v-model="value"/>
        <Marquee class="realData">
                  <ul class="fa-scroll-cont">
                    <li v-for="item in note" :key="item.id" style="display: flex;
    height: 27px;
    align-items: center;">
                      <span class="roll-text">{{ item.title }}</span>
                      <span class="roll-text" v-html="item.message"></span>
                    </li>
                  </ul>
        </Marquee>
      <!-- <div class="wrap">
            <div ref="box" class="box">
                <span>{{note[0].title}}</span>
                <span v-html="note[0].message"></span>
            </div>
      </div>       -->
    <!-- <div class="notice-card-wrapper">
        <div class="header">
          <div class="title">
            <div class="message">
              <div class="inner-container">
                <span>{{note[0].title}}</span>
                <span v-html="note[0].message"></span>
              </div>
            </div>
          </div>
        </div>
      </div> -->
        <!-- <div class="flex">
           <van-icon name="bullhorn-o" />
            <div class="wrapper flex">
              <div  v-for="note in note" :key="note.id" class="block">
                  <span>公告：{{note.title}}  <span v-html="note.message"></span></span>
                  
              </div>
            </div>
        </div> -->
        <!-- <van-overlay :show="show" @click="show = false" >
          <div class="wrapper">
            <div  v-for="note in note" :key="note.id" class="block">
              <div>公告：{{note.title}} 
                <span v-html="note.message"></span>
              </div>
            </div>
          </div>
        </van-overlay> -->

        <van-row type="flex" class="home-content">
        <van-col span="8" >
            <div class="content-item" @click="$router.push('park')">
              <van-icon name="map-marked" color="blue"/>
              <span>我要停车</span>
            </div>
        </van-col>
        <van-col span="8">
            <router-link to="list">
            <div class="content-item">
                <van-icon name="gold-coin" color="#FFC125"/>
                <span>缴费查询</span>
            </div>
            </router-link>
        </van-col>
        <van-col span="8">
            <router-link to="search">
            <div class="content-item">
                <van-icon name="map-marked" color="black"/>
                <span>停车场查询</span>
            </div>
            </router-link>
        </van-col>
        <!-- <van-col span="6">
            <div class="content-item">
            <van-icon name="bag" color="#FF7F00"/>
            <span>车品商城</span>
            </div>
        </van-col> -->
        </van-row>

        <van-swipe :autoplay="3000" indicator-color="white" class="home-swipe">
        <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image">
        </van-swipe-item>
        </van-swipe>

        <div v-show="false" class="count">
        <div class="count-desc">
            <div class="desc-item">
            <div>入场时间</div>
            <div>22:27:00</div>
            </div>
            <div class="desc-item">
            <div>计费标准</div>
            <div>14元/小时</div>
            </div>
            <div class="desc-item">
            <div>推荐车位</div>
            <div>6号</div>
            </div>
        </div>
        <div class="count-money">
            已消费：
            <span>14元</span>
        </div>
        </div>
        <div class="font">{{list.length ? '订单列表' : '暂无待处理订单'}}</div>
          <div  class="bigBox">
            <div class="box-list" v-for="item in list" :key="item.car_id">
                <div class="flex-sp-center">
                    <div class="ellipsis adrss">
                        <div class="top">{{item.parking_lot_name}} - {{item.areaName}}</div>
                        <div class="time" style="margin-top:10px">{{gettime(item.createTime)}}</div>
                    </div>
                    <div style="text-align:center">
                      <div style="color:red" @click="showModel(item)">离场</div>
                      <!-- <van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">
                        <template #reference>
                          <van-button type="primary">是否取消该预约，且取消费用为：</van-button>
                        </template>
                      </van-popover> -->
                      <div style="color:red;margin-top:10px" @click="showModel1(item)">取消预约</div>
                    </div>
                </div>
            </div>
          </div>
        <van-popup v-model="show1" position="bottom" class="popup" close-on-click-overlay>
            <van-cell-group>
                <van-field v-model="money" placeholder="支付数值" disabled/>
                <van-radio-group v-model="radio" class="radio">
                <span>支付方式：</span>
                    <van-radio name="余额">余额</van-radio>
                    <!-- <van-radio name="微信">微信</van-radio>
                    <van-radio name="支付宝">支付宝</van-radio> -->
                </van-radio-group>
                <van-button type="primary" size="large" @click="payment">确认支付</van-button>
            </van-cell-group>
        </van-popup>
        <van-popup v-model="show2" position="bottom" class="popup" close-on-click-overlay>
            <van-cell-group>
              <div style="display:flex;width:100%;text-align:center;">
                <div style="width:120px;margin-top:12px">取消费用数额</div>
                <van-field v-model="money1" placeholder="取消预约费用支付数值" disabled/>
              </div>
                <van-radio-group v-model="radio" class="radio">
                <span>支付方式：</span>
                    <van-radio name="余额">余额</van-radio>
                    <!-- <van-radio name="微信">微信</van-radio>
                    <van-radio name="支付宝">支付宝</van-radio> -->
                </van-radio-group>
                <van-button type="primary" size="large" @click="cancelOrder">取消预约</van-button>
            </van-cell-group>
        </van-popup>
    </div>
</template>

<script>
import {
    Search,
    Row,
    Col,
    Icon,
    Swipe,
    SwipeItem,
    Lazyload,
    Panel,
    Cell,
    Toast
} from "vant";
import  marquee  from "./marquee.vue";
export default {
    components: {
        [Search.name]: Search,
        [Row.name]: Row,
        [Col.name]: Col,
        [Icon.name]: Icon,
        [Swipe.name]: Swipe,
        [SwipeItem.name]: SwipeItem,
        [Lazyload.name]: Lazyload,
        [Panel.name]: Panel,
        [Cell.name]: Cell,
        marquee
    },
    data() {
        return {
            value: "",
            userid: this.$store.state.userid,
            url: this.$store.state.url,
            url1: this.$store.state.url1,
            images: ["../img/car1.jpg", "../img/car2.jpg"],
            costList: null,
            longTime: "",
            cost: 0,
            status: "未离场",
            costDate: "",
            note: {},
            show: false,
            timer: null,
            list: [],
            show1: false,
            money: 0,
            radio: '余额',
            info: {},
            userMoney: 0,
            money1: 0,
            show2: false,
        };
    },
    beforeCreate() {
        this.$store.dispatch("reflashSet");
    },
    mounted() {
        // this.getStatus()
        this.getNote()
        this.getList()
        this.getInfo()
    },
    // destroyed () {
    //     this.stopText()
    // },
    methods: {
        async getInfo() { 
          try{
            const { data : res } = await this.$api.User.getUserInfo({ 
              id: localStorage.userid
            })
            if(res.code) return false 
            this.userMoney = res.result[0].money
              window.localStorage.setItem("money", res.result[0].money);
          }catch(e){ 
            console.log(e);
          }
        },
        showModel(val) { 
          this.show1 = true
          this.info = val
          console.log(val);
          const { inTime ,outTime,createTime,moreMoney,hourMoney } = val
          let date = new Date()

          let nowYear = date.getFullYear()
          let nowMonth = date.getMonth() + 1
          let nowDay = date.getDate()
          let nowHour = date.getHours() 
          let nowMinute = date.getMinutes() 
          let str = `${nowHour}:${nowMinute}`
          let create = `${this.gettime(createTime).split(' ')[0]} 0:0:0`
          let now = `${nowYear}-${nowMonth}-${nowDay} 0:0:0`
          let _create = new Date(create).getTime()
          let _now = new Date(now).getTime()
          // 进场小时
          let intime1 = parseInt(inTime.split(':')[0])
          let intime2 = parseInt(inTime.split(':')[1])
          // 出场小时
          let outTime1 = parseInt(outTime.split(':')[0])
          let outTime2 = parseInt(outTime.split(':')[1])
          if(_create === _now) { 
            // 用户定的 19： 00出场 现在 15： 00
            if(outTime1 > nowHour){
              let hour = nowHour - intime1
              let money = 0
              money = hour * hourMoney
              this.money = money
            }
            // 用户定的13：00出场 现在15：00
            else if (outTime1 < nowHour) { 
              // 预约时停了多久
              let hour = outTime1 - intime1
              let mouey  = 0
              mouey = hour * hourMoney
              let money1  = (nowHour - outTime1) * parseInt(moreMoney)
              this.money = mouey + money1
            }
          }else{ 
            // 超过天数
            let day = parseInt(new Date(create).toLocaleString().split(' ')[0].split('/')[2])
            let moreDay = nowDay - day
            // 如果出场时间超过用户定义的出场时间
            if(nowHour > outTime1){
              let money = 0
              let moer = 0
              let count = 0
              moer = nowHour - outTime1
              money = moer * moreMoney
              count = 24 * parseInt(hourMoney) * moreDay
              this.money = count + money
            }
          }
        },
        showModel1(data) { 
          this.show2 = true
          this.money1 = data.cancleMoney
          this.info = data
        },
        async updateSpaceStatus() { 
            try{ 
                const { data : res } = await this.$api.Parking.updateSpaceStatus({
                    status: 0,
                    space_id: this.info.space_id
                })
                if(res.code) return Toast(res.msg)
            }catch(e) { 
                console.log(e);
            } 
        },
        async updateCarStatus() { 
            try{ 
                const { data : res } = await this.$api.Parking.updateCarStatus({
                    status: 1,
                    car_id: this.info.car_id
                })
                if(res.code) return Toast(res.msg)
            }catch(e) { 
                console.log(e);
            } 
        },
        async delNoOrder() { 
            try{ 
                const { data : res } = await this.$api.User.delNoOrder({
                    id: this.info.id,
                    status: 1,
                    appoint_price: this.money
                })
                if(res.code) return Toast(res.msg)
            }catch(e) { 
                console.log(e);
            } 
        },
        async delNoOrder1() { 
            try{ 
                const { data : res } = await this.$api.User.delNoOrder({
                    id: this.info.id,
                    status: 2,
                })
                if(res.code) return Toast(res.msg)
            }catch(e) { 
                console.log(e);
            } 
        },
        async payment() { 
          try { 
          // 获取当前多少钱
            if(this.userMoney < this.money ) return Toast('用户余额不足请前往钱包重置')
            // 扣钱
            const { data : res } = await this.$api.User.userPark({ 
                id: localStorage.userid,
                money: this.money
            })
            if(res.code) return Toast(res.msg)
            // 删除订单
            this.delNoOrder()
            // 修改车位状态
            this.updateSpaceStatus()
            // 修改车辆状态
            this.updateCarStatus()
            this.show1 = false
            Toast('谢谢您的惠顾')
            this.getList()
          }catch(e) { 
            console.log(e);
          }
        },
        async cancelOrder() { 
          try { 
          // 获取当前多少钱
            if(this.userMoney < this.money1 ) return Toast('用户余额不足请前往钱包重置')
            // 扣钱
            const { data : res } = await this.$api.User.userPark({ 
                id: localStorage.userid,
                money: this.money
            })
            if(res.code) return Toast(res.msg)
            // 删除订单
            this.delNoOrder1()
            // 修改车位状态
            this.updateSpaceStatus()
            // 修改车辆状态
            this.updateCarStatus()
            this.show2 = false
            Toast('取消成功')
            this.getList()
          }catch(e) { 
            console.log(e);
          }
        },
        async getList() { 
            try{ 
                const { data : res } = await this.$api.User.getNoOrder({ 
                    userId: localStorage.userid,
                    status: '0'
                })
                if(res.code) return Toast(res.msg)
                this.list = res.result
            }catch(e) { 
                console.log(e);
            }
        },
        startText () {
            if(this.timer != null) return;
            let width = this.getLenPx(this.note[0].message, this.note[0].style.fontSize)
            let distance = this.note.style.width; // 设为0从左侧开始播放
            this.timer = setInterval(() => {
                distance = distance - 1;
                // 如果位移超过文字宽度，则回到起点
                if (-distance >= width) {
                    distance = this.element.style.width
                }
                this.$refs.box.style.transform = 'translateX(' + distance + 'px)';
            }, 10)
        },
        stopText () {
            //清除定时器
            clearInterval(this.timer)
            //清除定时器之后，需要重新将定时器置为null
            this.timer = null
        },
        // 获取字符串占位px
        getLenPx(str, font_size) {
            var str_leng = str.replace(/[^\x00-\xff]/gi, 'aa').length;
            return str_leng * font_size / 2
        },
      async getNote() { 
        try{ 
          const { data : res } = await this.$api.Note.getNote({
            title : ''
          })
          if(res.code)return false
          if(res.result.length) this.show = true
          this.note = res.result
          // this.startText()
        }catch(e){
          console.log(e);
        }
      },
        gettime(t) {
            var _time = new Date(t);
            var year = _time.getFullYear();
            var month = _time.getMonth() + 1;
            var date = _time.getDate();
            var hour = _time.getHours();
            var minute = _time.getMinutes();
            var second = _time.getSeconds();
            return (
                year +
                "-" +
                month +
                "-" +
                date +
                " " +
                hour +
                ":" +
                minute +
                ":" +
                second
            ); //这里自己按自己需要的格式拼接
        },
        getdiff(begin, end) {
            let timediff = end - begin;
            let _time = new Date(timediff);
            let beginHour = new Date(begin);
            let hour = _time.getHours();
            let minute = _time.getMinutes();
            let res = "";
            if (hour - beginHour.getHours() > 0) {
                res += (hour - beginHour.getHours()) + "小时";
            }
            if (minute > 0) {
                res += minute + "分钟";
            }
            return res;
        },
        getCost(begin, end, cost) {
            let timediff = end - begin;
            let _time = new Date(timediff);
            let beginHour = new Date(begin);
            let hour = _time.getHours();
            let minute = _time.getMinutes();
            let res = 0;
            if (hour - beginHour.getHours() > 0) {
                res = cost * (hour - beginHour.getHours());
            }
            if (minute != 0) {
                res += cost;
            }
            return res;
        },
        getStatus() { 
            let _this = this;
            this.axios({
                url: _this.url + "appGetUserById" ,
                method: "post",
                data: {
                    id: localStorage.userId
                }
            })
            .then(res => {
                console.log(res)
                // let list = res.data.rows;
                // let chuo = Date.parse(new Date());
                // for (let i = 0; i < list.length; i++) {
                // if (!list[i].status) {
                //     if (list[i].inTime) {
                //     let longTime = _this.getdiff(list[i].inTime, chuo);
                //     let cost = _this.getCost(list[i].inTime, chuo, 14);
                //     _this.costDate = _this.gettime(list[i].inTime);
                //     _this.longTime = longTime;
                //     _this.cost = cost;
                //     }
                //     if (list[i].outTime) {
                //     _this.status = "未支付";
                //     _this.cost = list[i].payment;
                //     _this.longTime = _this.getdiff(list[i].inTime, list[i].outTime);
                //     }
                //     _this.costList = list[i];
                //     break;
                // }
                // }
            })
            .catch(err => {
                console.log(err);
            });
        },
        gotoPark() { 

        }
    }
};
</script>

<style lang="scss" scoped>
$blue: #2d8cf0;
$fontColor: #323233;
#home {
  height: 100%;
  width: 100%;
  font-size: 0.28rem;
}
.home-search {
  background: $blue !important;
}
.home-content {
  height: 1.4rem;
  background: #fff;
}
.content-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 0.6rem;
  span {
    font-size: 0.24rem;
    margin-top: 0.05rem;
    color: $fontColor;
  }
}
.home-swipe {
  height: 3rem;
  background: #fff;
  margin-top: 0.3rem;
  img {
    width: 100%;
    height: 100%;
  }
}
.count {
  margin-top: 0.4rem;
  width: 100%;
  background: #fff;
  height: 2.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: 600;
  .count-money {
    width: 100%;
    height: 50%;
    font-size: 0.28rem;
    span {
      font-size: 0.6rem;
      color: rgb(245, 230, 28);
    }
  }
  .count-desc {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    .desc-item {
      margin: 0.2rem 0.1rem;
      div {
        margin-bottom: 0.1rem;
        font-weight: 600;
        font-size: 0.28rem;
      }
      div:last-child {
        font-size: 0.18rem;
      }
    }
  }
}
.cost {
  margin-top: 0.3rem;
}
.cost-content {
  display: flex;
  justify-content: space-between;
  color: black;
}
.cost-left {
  align-self: center;
  margin-right: 0.3rem;
  font-size: 0.5rem;
}
.finish-cost {
  height: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  div {
    margin: 0.1rem 0.2rem;
  }
}
.no-cost {
  background: #fff;
  width: 100%;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-size: 0.3rem;
}
  .block {
    border-radius: 16px;
  }
  .flex{ 
    display: flex;
    align-content: center;
  }
.notice-card-wrapper {

}
  .inner-container {
    margin-left: 100%; // 把文字弄出可见区域
    width: 200%;
    animation: myMove 30s linear infinite; // 重点，定义动画
    animation-fill-mode: forwards;
  }
  @keyframes myMove {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-2500px);
    }
  }
.wrap {
    overflow: hidden;
}
 
.box {
    width: 8000%;
    overflow: hidden;
}
.flex-sp-center{
    display: flex;
    align-items: center;
    justify-content: space-between;

}
.list-box{ 
        padding: 10px;

    .box{
        width: 100%;
        border: 1px solid #eee;
        background: #fff;
        border-radius: 16px;
        margin-top: 15px;
        display: flex;
        font-size: 16px;
        align-items: center;
        .number{ 
            color: #2d8cf0;
        }
        .yellow{ 
            color: rgb(223, 223, 135);
        }
        .red{ 
            color: rgb(226, 87, 87);
        }
        .green{ 
            color: green;
        }
        .top{
            font-size: 16px;
            font-weight: 600;
        }
        .time{ 
            font-size: 14px;
            margin-top: 10px;
        }
    }
}
.bigBox{
  padding: 5px;
}
.box-list{ 
  border: 1px solid #eee;
  background: #fff;
  border-radius: 16px;
  font-size: 16px;
  padding: 20px;
  margin-top: 5px;
}
.font{ 
  font-weight: 600;
  font-size: 16px;
  margin-top: 5px;
  text-align: center;
}
.radio{ 
    display: flex;
    padding-bottom: 10px;
    padding-top: 10px;
}
</style>
